<template>
    <table>
        <thead>
            <tr>
                <th>班次</th>
                <th>时间范围</th>
                <th>关联用户</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

            <tr v-for="(item, index) in tableList" :key="index">
                <td>{{ item.workforceName }}</td>
                <td v-if="item.startTime">{{ item.startTime + '-' + item.endTime }}</td>
                <td v-else></td>
                <td>
                    <span v-for="(v, i) in item.workforceXrefList" :key="i">{{ v.userName }}<span
                            :style="{ 'display': i == item.workforceXrefList.length - 1 ? 'none' : 'inline-block' }">，</span></span>
                </td>
                <td style="cursor: pointer;"><span style=" display: inline-block;
                    width: 50px;" v-if="item.workforceName || item.startTime || item.endTime || item.workforceXrefList"
                        @click="editTableItem(item)">修改</span> <span style=" display: inline-block;
                    width: 50px;" @click="delTableItem(item)"
                        v-if="item.workforceName || item.startTime || item.endTime || item.workforceXrefList">删除</span>
                </td>
            </tr>

        </tbody>
    </table>
</template>
<script>
import { delTableFunApi } from "@/api/SettingsApi/index"
export default {
    props: ['tableList'],
    methods: {
        editTableItem(item) {

            this.$emit("EmitItemFun", item)
        },
        delTableItem(item) {
            delTableFunApi({ workforceId: item.workforceId }).then(res => {
                    if (res.code == 200) {
                        this.$emit("delItemFun")

                    }
                })

        }
    },


}
</script>
<style lang="less" scoped>
table {
    width: 100%;
    background: linear-gradient(60deg, #021130 0%, #010D2A 100%);
    opacity: 1;
    border: 1px solid #00469C;
    border-collapse: collapse;
    font-size: 10px;

    thead {
        width: 1572px;
        color: white;

        tr {

            height: 40px;
            color: white;
            font-size: 13px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #FFFFFF;
            background: rgba(11, 111, 189, 0.48);


            th {
                color: white;
                text-align: center;
                width: 10%;
                border: 1px solid #00469C;
            }
        }

    }

    tbody {
        width: 1572px;
        color: white;

        tr {
            border: 1px solid #00469C;
            height: 44px;

            td {
                font-size: 14px;
                text-align: center;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-weight: 400;
                color: #BDE5FD;
                padding-left: 10px;
                border: 1px solid #00469C;


            }
        }

        tr:nth-child(even) {
            background: rgba(11, 111, 189, 0.22) !important;


            td {
                color: #BDE5FD;
            }
        }

    }

}
</style>